<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/datepicker.js"></script>
</head>
<body>
    <button class="btn btn-open" type="button">时间选择器</button>
    <div hidden class="mask">
        <div class="slide-box">
            <h4>时间选择器</h4>
            <div class="picker-group">
                <div class="picker-column">
                    <ul class="picker-content"></ul>
                </div>
                <div class="picker-column">
                    <ul class="picker-content"></ul>
                </div>
            </div>
            <button class="btn btn-sure" type="button">确定</button>
        </div>
    </div>
    <script>
        // const btnOpen = document.querySelector('.btn-open');
        // const btnSure = document.querySelector('.btn-sure');
        // const mask = document.querySelector('.mask');
        // const slide = document.querySelector('.slide-box');
        // btnOpen.addEventListener('click', function () {
        //     mask.hidden = false;
        //     mask.classList.add('fade-in');
        //     slide.classList.add('slide-up');
        // });
        // mask.addEventListener('click', function (e) {
        //     if (e.target.className.includes('mask')) {
        //         mask.classList.remove('fade-in');
        //         mask.classList.add('fade-out');
        //         slide.classList.remove('slide-up');
        //         slide.classList.add('slide-down');
        //     }
        // });
        // mask.addEventListener('animationend', function (e) {
        //     if (e.target.className.includes('fade-out')) {
        //         mask.hidden = true;
        //         mask.classList.remove('fade-out');
        //         slide.classList.remove('slide-down');
        //     }
        // });
        // btnSure.addEventListener('click', function (e) {
        //     alert(hourPicker.result + ' : ' + minutePicker.result);
        //     e.preventDefault();
        // });
        // /**
        //  * 原生javascript实现picker
        //  */
        // class Picker {
        //     constructor(options) {
        //         this.options = Object.assign({}, options);
        //         this.isPointerdown = false;
        //         this.itemHeight = 40; // 列表项高度
        //         this.maxY = this.itemHeight * 2;
        //         this.minY = this.itemHeight * (3 - this.options.list.length);
        //         this.lastY = 0;
        //         this.diffY = 0;
        //         this.translateY = 0; // 当前位置
        //         this.friction = 0.95; // 摩擦系数
        //         this.distanceY = 0; // 滑动距离
        //         this.result = this.options.list[0];
        //         this.render();
        //         this.bindEventListener();
        //     }
        //     render() {
        //         let html = '';
        //         for (const item of this.options.list) {
        //             html += '<li>' + item + '</li>';
        //         }
        //         this.options.pickerContent.innerHTML = html;
        //         this.options.pickerContent.style.transform = 'translate3d(0px, ' + this.maxY + 'px, 0px)';
        //     }
        //     handlePointerdown(e) {
        //         // 如果是鼠标点击，只响应左键
        //         if (e.pointerType === 'mouse' && e.button !== 0) {
        //             return;
        //         }
        //         this.options.pickerColumn.setPointerCapture(e.pointerId);
        //         this.isPointerdown = true;
        //         this.lastY = e.clientY;
        //         this.diffY = 0;
        //         this.distanceY = 0;
        //         this.getTransform();
        //         this.options.pickerContent.style.transform = 'translate3d(0px, ' + this.translateY + 'px, 0px)';
        //         this.options.pickerContent.style.transition = 'none';
        //     }
        //     handlePointermove(e) {
        //         if (this.isPointerdown) {
        //             this.diffY = e.clientY - this.lastY;
        //             this.translateY += this.diffY;
        //             this.lastY = e.clientY;
        //             this.options.pickerContent.style.transform = 'translate3d(0px, ' + this.translateY + 'px, 0px)';
        //         }
        //     }
        //     handlePointerup(e) {
        //         if (this.isPointerdown) {
        //             this.isPointerdown = false;
        //             this.getTranslateY();
        //             // 滑动距离与时长成正比且最短时长为300ms
        //             const duration = Math.max(Math.abs(this.distanceY) * 1.5, 300);
        //             this.options.pickerContent.style.transition = 'transform ' + duration + 'ms ease';
        //             this.options.pickerContent.style.transform = 'translate3d(0px, ' + this.translateY + 'px, 0px)';
        //         }
        //     }
        //     handlePointercancel(e) {
        //         if (this.isPointerdown) {
        //             this.isPointerdown = false;
        //         }
        //     }
        //     bindEventListener() {
        //         this.handlePointerdown = this.handlePointerdown.bind(this);
        //         this.handlePointermove = this.handlePointermove.bind(this);
        //         this.handlePointerup = this.handlePointerup.bind(this);
        //         this.handlePointercancel = this.handlePointercancel.bind(this);
        //         this.options.pickerColumn.addEventListener('pointerdown', this.handlePointerdown);
        //         this.options.pickerColumn.addEventListener('pointermove', this.handlePointermove);
        //         this.options.pickerColumn.addEventListener('pointerup', this.handlePointerup);
        //         this.options.pickerColumn.addEventListener('pointercancel', this.handlePointercancel);
        //     }
        //     getTransform() {
        //         const transform = window.getComputedStyle(this.options.pickerContent).getPropertyValue('transform');
        //         this.translateY = parseFloat(transform.split(',')[5]);
        //     }
        //     getTranslateY() {
        //         let speed = this.diffY;
        //         while (Math.abs(speed) > 1) {
        //             speed *= this.friction;
        //             this.distanceY += speed;
        //         }
        //         // 边界判断
        //         let y = this.translateY + this.distanceY;
        //         if (y > this.maxY) {
        //             this.translateY = this.maxY;
        //             this.distanceY = this.maxY - this.translateY;
        //         } else if (y < this.minY) {
        //             this.translateY = this.minY;
        //             this.distanceY = this.minY - this.translateY;
        //         } else {
        //             this.translateY = y;
        //         }
        //         // 计算停止位置使其为itemHeight的整数倍
        //         let i = Math.round(this.translateY / this.itemHeight);
        //         this.translateY = i * this.itemHeight;
        //         this.result = this.options.list[2 - this.translateY / this.itemHeight];
        //     }
        // }
        //
        // // 调用方式
        // function createList(start, end) {
        //     const list = [];
        //     for (i = start; i < end; i++) {
        //         list[i] = i < 10 ? '0' + i : '' + i;
        //     }
        //     return list;
        // }
        // const hours = createList(0, 24), minutes = createList(0, 60);
        // const pickerColumns = document.querySelectorAll('.picker-column');
        // const pickerContents = document.querySelectorAll('.picker-content');
        // const hourPicker = new Picker({
        //     pickerColumn: pickerColumns[0],
        //     pickerContent: pickerContents[0],
        //     list: hours
        // });
        // const minutePicker = new Picker({
        //     pickerColumn: pickerColumns[1],
        //     pickerContent: pickerContents[1],
        //     list: minutes
        // });
    </script>
</body>
</html>